<template>
    <div class="app-container">
        <el-row :gutter="10">
          <el-form :model="messageList"  label-width="70px">
          <el-col :span="5" >
            <el-form-item label="所属机构" prop="type" size="small">
              <treeselect v-model="queryParams.deptId" :options="deptList" :show-count="true" placeholder="请选择所属机构" />
            </el-form-item>
          </el-col>
          <el-col :span="3" :xs="24">
            <el-form-item label="编码" prop="code" size="small" label-width="40px" >
              <el-input v-model="queryParams.code" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :xs="24">
              <el-form-item label="职业病类别" prop="illnessId" size="small" label-width="90px">
                <el-select
                v-model="queryParams.illnessId"
                placeholder="全部"
                clearable
                >
                <el-option
                    v-for="dict in illnessList"
                    :key="dict.id"
                    :label="dict.name"
                    :value="dict.id"
                />
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="4" >
            <el-form-item label="职业病名称" prop="illnessName" size="small" label-width="90px">
              <el-input v-model="queryParams.illnessName" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :xs="24">
            <el-form-item label="状态标识" prop="state"  size="small">
              <el-select v-model="queryParams.state" placeholder="请选择">
              <el-option label="正常" value=2></el-option>
              <el-option label="停用" value=1></el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" >
            <el-button icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-col>
         </el-form>
        </el-row>
        <el-row  :gutter="10" class="mb8">
            <el-col :span="1.5" :offset="0.5">
                <el-button type="primary" size="mini" @click="handleAdd" >新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                :disabled="multiple"
                @click="handleDelete"
                >删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                type="info"
                plain
                icon="el-icon-upload2"
                size="mini"
                @click="handleImport"
                >导入</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
                >导出</el-button>
            </el-col>
        </el-row>
        <!-- 显示列表 -->
        <el-row>
            <el-col >
                <el-table v-loading="loading" :data="messageList" stripe @selection-change="handleSelectionChange">
                <el-table-column type="index" width="55" align="center" />
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column
                    prop="sysDept.deptName"
                    label="所属机构"
                    sortable
                    align="center"
                    width="200">
                </el-table-column>
                <el-table-column
                    prop="code"
                    label="编码"
                    sortable
                    align="center"
                    width="200">
                </el-table-column>
                <el-table-column
                    prop="aIllness.name"
                    label="职业病类别"
                    sortable
                    align="center"
                    width="200">
                </el-table-column>
                <el-table-column
                    prop="illnessName"
                    label="职业病名称"
                    sortable
                    align="center"
                    width="200">
                </el-table-column>
                <el-table-column
                    prop="state"
                    label="状态标识"
                    sortable
                    align="center"
                    width="200"
                    >
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.state==2">正常</el-tag>
                        <el-tag type="danger" v-if="scope.row.state==1">停用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleUpdates(scope.row)">编辑</el-button>

                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleQueryOne(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
                </el-table>

                <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
                />
            </el-col>
            <!-- 查看详情 -->
            <el-drawer
                :visible.sync="drawer"
                :with-header="false"
                :modal="form2"
                >
                <el-descriptions title="信息详情" :column="1">
                    <el-descriptions-item label="编码">{{form2.code}}</el-descriptions-item>
                    <el-descriptions-item label="职业病名称">{{form2.illnessName}}</el-descriptions-item>
                    <el-descriptions-item label="状态">{{form2.state}}</el-descriptions-item>
                    <el-descriptions-item label="创建时间">{{form2.createTime}}</el-descriptions-item>
                    <el-descriptions-item label="编辑时间">{{form2.updateTime}}</el-descriptions-item>
                </el-descriptions>
            </el-drawer>
            <!-- 新增/编辑弹框 -->
            <el-dialog :title="title" :visible.sync="open"  width="600px">
                <el-form label-width="100px" :model="form" :rules="rules" ref="form1" :label-position="labelPosition">
                <el-form-item label="职业病编码" prop="code">
                    <el-input v-model="form.code"></el-input>
                </el-form-item>
                <el-form-item label="职业病类别" prop="illnessId" size="small" >
                    <el-select v-model="form.illnessId" placeholder="全部" clearable>
                    <el-option
                        v-for="dict in illnessList"
                        :key="dict.id"
                        :label="dict.name"
                        :value="dict.id"
                    />
                    </el-select>
                </el-form-item>
                <el-form-item label="职业病名称" prop="illnessName">
                    <el-input v-model="form.illnessName"></el-input>
                </el-form-item>
                <el-form-item label="状态标识" prop="state">
                    <el-radio label=2 v-model="form.state" >正常</el-radio>
                    <el-radio label=1 v-model="form.state" >停用</el-radio>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="cancel">取消</el-button>
                    <el-button type="primary" @click="submitForm">确定</el-button>
                </el-form-item>
                </el-form>
            </el-dialog>

            <!-- 用户导入对话框 -->
            <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
            <el-upload
                ref="upload"
                :limit="1"
                accept=".xlsx, .xls"
                :headers="upload.headers"
                :action="upload.url + '?updateSupport=' + upload.updateSupport"
                :disabled="upload.isUploading"
                :on-progress="handleFileUploadProgress"
                :on-success="handleFileSuccess"
                :auto-upload="false"
                drag
            >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip text-center" slot="tip">
                <div class="el-upload__tip" slot="tip">
                    <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
                </div>
                <span>仅允许导入xls、xlsx格式文件。</span>
                <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
                </div>
            </el-upload>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFileForm">确 定</el-button>
                <el-button @click="upload.open = false">取 消</el-button>
            </div>
            </el-dialog>
        </el-row>

    </div>


</template>
<script>
import {getDeptList,listMessage,delMessage,getIllnessType,getMessage,addAIllnessManage} from "@/api/system/illnessManage";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
    components: { Treeselect },
    data(){
        return{
        //抽屉
        drawer: false,
        // 遮罩层
        loading: true,
        //左对齐
        labelPosition: 'left',
        //安全分类表格数据
        messageList: null,
        // 总条数
        total: 0,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        //所属机构
        deptList: [],
        //职业病类别
        illnessList: undefined,
        // 查询参数
        queryParams: {
        pageNum: 1,
        pageSize: 10,
        },
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: "",
        // 表单参数
        form: {},
        form1: {
            code: '',
            illnessId: '',
            illnessName: '',
            state: ''
        },
        // 抽屉表单
        form2: {},
        // form 表单校验
        rules: {
            code: [
            { required: true, message: '请输入编码', trigger: 'blur' },
            ],
            illnessId: [
            { required: true, message: '请选择类别', trigger: 'blur' },
            ],
            illnessName: [
            { required: true, message: '请输入名称', trigger: 'blur' },
            ],
            state: [
            { required: true,message: '请选择状态'}
            ]
        },
        // 用户导入参数
        upload: {
            // 是否显示弹出层（用户导入）
            open: false,
            // 弹出层标题（用户导入）
            title: "",
            // 是否禁用上传
            isUploading: false,
            // 是否更新已经存在的用户数据
            updateSupport: 0,
            // 设置上传的请求头部
            headers: { Authorization: "Bearer " + getToken() },
            // 上传的地址
            url: process.env.VUE_APP_BASE_API + "/aqsc/safeClassify/importData"
        },
        }
    },

    mounted(){
    this.getList()
    this.getDeptTree()
    this.getIllnessList()

    },
    methods: {
        /** 查询所属机构下拉树结构 */
        getDeptTree() {
        getDeptList().then(response => {
            this.deptList = response.data;
        });
        },
        //职业病类别查询
        getIllnessList(){
            getIllnessType().then(response=>{
            this.illnessList=response.rows;
      })
        },
        //列表查询
        getList(){
        listMessage(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
            this.loading=true;
            this.messageList = response.rows;
            this.total = response.total;
            this.loading = false;
            }
        )
        },
        /** 查询按钮操作 */
        handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
        },
        //重置
        resetQuery(){
        this.form = {}
        this.queryParams = {}
        this.queryParams.pageNum = 1;
        this.getList()
        },
        //新增信息
        handleAdd() {
        if(this.queryParams.deptId!=undefined){
            this.form={}
            this.open = true
            this.title = "新建"
            this.form.deptId = this.queryParams.deptId
        }else{
            this.$alert('请选择所属机构', {
            confirmButtonText: '确定',
            });
        }
        },
        //多选框选中数据
        handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id);
        this.single = selection.length != 1;
        this.multiple = !selection.length;
        },
        /** 编辑按钮操作 */
        handleUpdates(row) {
            const userId = row.id || this.ids;
            getMessage(userId).then(response => {
                this.form = response.data;
                console.info(this.form)
                this.open = true;
                this.title = "编辑";
            });
        },
        // 查看详情
        handleQueryOne(row){
            this.drawer = true
            const userId = row.id || this.ids;
            getMessage(userId).then(response => {
                this.form2 = response.data;
            })
        },
        /** 删除按钮操作 */
        handleDelete(row) {
        const userIds = row.id || this.ids;
        this.$modal.confirm('是否确认删除选中的数据项？').then(function() {
            return delMessage(userIds);
        }).then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
        },
        /** 导出按钮操作 */
        handleExport() {
        this.download('aqsc/illnessManage/export', {
            ...this.queryParams
        }, `safeClassify_${new Date().getTime()}.xlsx`)
        },

        //取消
        cancel(){
        this.open = false
        this.form = {}
        },
        //提交
        submitForm(){
        this.$refs['form1'].validate((valid) => {
            if (valid) {
                addAIllnessManage(this.form).then(resp=> {
                if (resp.result) {
                    this.$message(resp.msg) //弹出成功
                }
                this.open = false
                this.queryParams = {}
                this.getList()
                this.form = {}
                });
            } else {
                console.log('error submit!!');
                return false;
            }
            });

        },
        /** 导入按钮操作 */
        handleImport() {
        this.upload.title = "职业病管理导入";
        this.upload.open = true;
        },
        /** 下载模板操作 */
        importTemplate() {
        this.download('aqsc/illnessManage/importTemplate', {
        }, `IllnessManage_template_${new Date().getTime()}.xlsx`)
        },
        // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
        this.upload.isUploading = true;
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
        this.getList();
        },
        // 提交上传文件
        submitFileForm() {
        this.$refs.upload.submit();
        },
        }
}


</script>
